<template>
  <div>
    <a-card>
      <a-form>
        <!-- form -->
        <v-form
          :expand="true"
          :form="form"
          :formParam="formParam"
          @query="tableRef.query()"
          @reset="tableRef.reset()"
        >
          <template #customize="{ title, key }">
            <a-input
              style="width: 100%"
              v-model:value="formParam[key]"
              :placeholder="`请输入${title}`"
              allow-clear
            />
          </template>
        </v-form>
      </a-form>
    </a-card>
    <!-- table -->
    <a-card style="margin-top: 10px">
      <v-table
        ref="tableRef"
        :setFn="getPage"
        :apiParam="{ current: 1, size: 10, range: undefined }"
        :columns="columns"
        :formParam="formParam"
        :toolConfig="{
          setting: true,
        }"
      >
        <!-- 中间层 -->
        <!-- <template #info></template> -->
        <!-- table -->
        <template #default="{ column, record }">
          <template v-if="column.dataIndex === 'image'">
            <a-image :width="50" :src="record[column.dataIndex]"></a-image>
          </template>
          <template v-if="column.dataIndex === 'operate'">
            <a type="link">编辑</a>
            <a-popconfirm
              title="确认删除此项吗？"
              @confirm="onDelete(record.id)"
            >
              <a-button type="link" danger> 删除 </a-button>
            </a-popconfirm>
          </template>
        </template>
      </v-table>
    </a-card>
  </div>
</template>

<script setup>
import { ref, onMounted } from "vue";
import { message } from "ant-design-vue";
import { form, columns, formItemLayout } from "./config/page";
import { tablePage, tableDelete } from "@/api";

// ref
const tableRef = ref(null);
const formParam = ref({});

// 防止接口先调用，参数没获取的情况下，在当前组件使用接口
const getPage = () => {
  tableRef.value.setFn(tablePage, {});
};

const onDelete = async (id) => {
  await tableDelete({ id });
  message.success("删除成功");
  refresh();
};

const refresh = () => {
  tableRef.value.refresh();
};

onMounted(() => {
  getPage();
});
</script>

<style scoped>
.but {
  display: flex;
  justify-content: flex-end;
  margin-top: 16px;
}
</style>
